<template>
  <div ref="Oiltemperature" id="OilTemperature" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
const props = defineProps({
    tremperaturedata: {
        type: Array,
        default: () => [15,20]
    }
});

onMounted(() => {
  var chartDom = document.getElementById('OilTemperature');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    series: [
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        splitNumber: 5,
        itemStyle: {
          color: '#FFAB91'
        },
        progress: {
          show: true,
          width: 15
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 15
          }
        },
        axisTick: {
          distance: -25,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        splitLine: {
          distance: -35,
          length: 14,
          lineStyle: {
            width: 3,
            color: '#999'
          }
        },
        axisLabel: {
          distance: -12,
          color: '#999',
          fontSize: 13
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          width: '100%', // 调整为100%以确保占满空间
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, '0%'], // 调整为0%以确保数字在中心
          fontSize: 20, // 减小字体大小
          fontWeight: 'bolder',
          formatter: '{value} °C',
          color: '#999'
        },
        data: [
          {
            value: 20
          }
        ]
      },
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        itemStyle: {
          color: '#FD7347'
        },
        progress: {
          show: true,
          width: 8
        },
        pointer: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 0
          }
        ]
      }
    ]
  };

  setInterval(function () {
    const random = +(Math.random() * 60).toFixed(2);
    myChart.setOption({
      series: [
        {
          data: [
            {
              value: 20
            }
          ]
        },
        {
          data: [
            {
              value: props.tremperaturedata[1]
            }
          ]
        }
      ]
    });
  }, 2000);

  option && myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
});
</script>
